<template>
  <div id="app">
    <swiper class="mini_top" :list="list" auto loop  :aspect-ratio="300/750"></swiper>
    <ul class="hl">
      <li>
        <i><img src="../assets/images/index/hl_icon1.png" /></i>
        <span>公司简介</span>
      </li>

      <li>
        <i><img src="../assets/images/index/hl_icon2.png" /></i>
        <span>安全保障</span>
      </li>

      <li>
        <i><img src="../assets/images/index/hl_icon3.png" /></i>
        <span>邀请有礼</span>
      </li>
    </ul>
    <ul class="productlist">
      <li>
        <h2 class="end">已满标</h2>
        <div class="first info">
          <div class="cover"><img src="../assets/images/index/car.jpg" /></div>
          <div class="item big"><h3>东风标致 250</h3>还款方式:按月付息到期还本</div>
          <div class="item small tcenter">
            <circle-css color="#ff6565", textcolor="#ff6565", width=52, :pv="25" ,  font-size=15, bold=6,  text-bg-color='#ffffff'></circle-css>
          </div>
          <div class="item small tcenter"><span class="tag">贷标</span></div>
        </div>

        <div class="second info">
          <div class="item">
            借款金额
            <span class="red"><b>2,214,569</b>元</span>
          </div>
          <div class="item">剩余可投<span><b>2,214,569</b>元</span> </div>
          <div class="item small">借款期限<span><b>6</b>个月</span></div>
        </div>
      </li>
    </ul>
    <div class="learnmore">查看更多>></div>

    <div class="sc_box">
      <div class="title">
        <span><i class="iconfont">&#xe631;</i>资讯频道</span>
        <span class="more">更多>></span>
      </div>

      <ul class="imglist">

        <li>
          <div class="img"><img src="../assets/images/index/car.jpg"/></div>
          <div class="info">
            <div class="stitle">深圳房价连续15周维持</div>
            <div class="extra">
              <span class="fl">
                <i class="iconfont">&#xe63f;</i>
                <b>94801</b>
              </span>
              <span>2016-12-20</span>
            </div>
          </div>
        </li>

        <li>
          <div class="img"><img src="../assets/images/index/car.jpg"/></div>
          <div class="info">
            <div class="stitle">深圳房价连续15周维持</div>
            <div class="extra">
              <span class="fl">
                <i class="iconfont">&#xe63f;</i>
                <b>94801</b>
              </span>
              <span>2016-12-20</span>
            </div>
          </div>
        </li>

    </div>
  </div>
</template>


<style>
@import '~vux/dist/vux.css';
</style>

<script>

import '../assets/sass/index/index.scss'
import '../assets/sass/common/circle.scss'

import CssCircle from '../v-circle/components/css-circle.vue'
import {Swiper} from 'vux'
//import IndexPage from '../components/index/index'
//import LoanPage from '../components/index/loan'
//import UserPage from '../components/index/user'

export default {
  data () {
  	return{
  		currentView: 'index',
  		busy:false,
      showLogo:true,

      list: [{
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400385458&ampidx=1&ampsn=78f6b8d99715384bdcc7746596d88359&ampscene=19#wechat_redirect',
        img: 'http://www.uximoney.com/data/upfiles/images/banner/banner_1489038237.jpg'
      }, {
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400160890&ampidx=1&ampsn=29ef02af25793a11a3f6aec92bfb46c1&ampscene=19#wechat_redirect',
        img: 'http://www.uximoney.com/data/upfiles/images/banner/banner_1488337791.jpg'
      }, {
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400094682&ampidx=1&ampsn=8231a2053b772b2108784fccc254d28c&ampscene=19#wechat_redirect',
        img: 'http://www.uximoney.com/data/upfiles/images/banner/banner_1488350227.jpg'
      }]

  	}
  },
  components: {
    CssCircle,
    Swiper
  },
  methods:{
  	setView(key){
  		this.currentView = key;
 
      localStorage.setItem("menu", this.currentView);

      if(key == 'user')
        this.showLogo = false;
      else
        this.showLogo = true;
  	}
  },
  route: {
    activate ( transition ) {
      transition.next();  
    }
  }
}
</script>


